<template>
    <div id="my">
        <div class="content">
            <div class="myinfo">
                <img src="http://yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png" alt />
                <p class="name">用户</p>
            </div>
            <div class="list">
                <div class="item" v-for="(item,index) in listData" :key="index" @click="goTo(item.url)">
                    <p>{{item.title}}</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            listData: [
                {
                    title: "我的订单",
                    url: "",
                },
                {
                    title: "优惠券",
                    url: "",
                },
                {
                    title: "我的足迹",
                    url: "",
                },
                {
                    title: "我的收藏",
                    url: "/pages/collectlist",
                },
                {
                    title: "地址管理",
                    url: "/pages/addressSelect",
                },
                {
                    title: "联系客服",
                    url: "",
                },
                {
                    title: "帮助中心",
                    url: "",
                },
                {
                    title: "意见反馈",
                    url: "/pages/feedback",
                },
            ],
        };
    },
    methods: {
        goTo(url){
            //解决NavigationDuplicated的解决方案
            this.$router.push({path:url}).catch(err=>{err})
        }
    },
};
</script>
<style lang="scss">
body {
    height: 100%;
    background: #f4f4f4;
}
#my {
    height: calc(100% - 1.33333rem);
    overflow: auto;
    margin-top: 0;
}
.myinfo {
    width: 100%;
    height: 3.73333rem;
    display: flex;
    align-items: center;
    background: #333;
    padding: 0 0.4rem;
    box-sizing: border-box;
    img {
        height: 1.97333rem;
        width: 1.97333rem;
        border-radius: 50%;
    }
    .name {
        margin-left: 0.4rem;
        color: #fff;
        font-size: 0.37333rem;
        margin-bottom: 0.13333rem;
    }
}
.list {
    display: flex;
    align-items: center;
    background: #fff;
    flex-wrap: wrap;
    .item {
        width: 33.33%;
        height: 1.92rem;
        padding: 0.66667rem 0;
        text-align: center;
        border-right: 0.01333rem solid rgba(0, 0, 0, 0.15);
        border-bottom: 0.01333rem solid rgba(0, 0, 0, 0.15);
        box-sizing: border-box;
        p{
            height: 0.56rem;
            line-height: 0.56rem;
            margin: 0;
        }
    }
}
</style>